<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="application"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="${ctx}/static/js/layui/css/layui.css">
    <title>首页</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item"><a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="">邮件管理</a>
                    </dd>
                    <dd>
                        <a href="">消息管理</a>
                    </dd>
                    <dd>
                        <a href="">授权管理</a>
                    </dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;">
                <img src="${ctx}/user/getImage?name=<shiro:principal property="headImg"/>" class="layui-nav-img">
                <shiro:principal property="username"/>
            </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="">基本资料</a>
                    </dd>
                    <dd>
                        <a href="">安全设置</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="${ctx}/user/logOut" id="exit">溜了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <c:forEach items="${menus}" var="menu">
                    <li class="layui-nav-item layui-nav-itemed"><a class=""
                                                                   href="javascript:;">${menu.menuname}</a>
                        <dl class="layui-nav-child">
                            <c:forEach items="${menu.children}" var="children">
                                <dd>
                                    <a href="javascript:;"
                                       data-url="${ctx}${children.url}?menuid=${children.id}">${children.menuname}</a>
                                </dd>
                            </c:forEach>

                        </dl>
                    </li>
                </c:forEach>
                <%-- 	<li class="layui-nav-item layui-nav-itemed"><a class=""
                        href="javascript:;">系统管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-url="${ctx}/user/user_listPage">用户管理</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="${ctx}/role/role_listPage">角色管理</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="${ctx}/menu/menu_listPage">菜单管理</a>
                            </dd>
                        </dl></li> --%>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" class="hh_body"></div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="${ctx}/static/js/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
        var $ = layui.$;

        //给每个菜单添加点击事件
        $('dl.layui-nav-child>dd').click(function () {
            //获取a标签中data-url属性中的值
            var url = $(this).find("a").attr("data-url");
            $('.hh_body').load(url);
        })
    });
</script>
</body>
</html>